<script setup>
import { fetchIndicesData } from '../api/weatherAPI'
import { computed, ref, watch } from 'vue'

//引用状态管理
import { useCityStore } from '../stores/cityStore'
// import router from '@/router'
//获取store实例
const cityStore = useCityStore()
//引入路由
import { useRouter } from 'vue-router'
//创建路由实例
const router = useRouter()

// 添加侦听器：监听状态管理中Location状态的变化
watch(
  //第一个参数（必选）：监听的数据源
  () => cityStore.location,
  //第二个参数（必选）：回调函数，当数据源有变化时需要做的事情
  () => {
    getData(cityStore.location.id)
    // city = ref()
  },
  //第三个函数（可选）：即使回调，初始状态执行一次回调函数
  { immediate: true }
)

//生活指数
const IndicesDaily = ref([])

//网络请求，获取后台数据
async function getData(locationID) {
  const res = await fetchIndicesData(locationID, 0)
  // console.log(res)
  IndicesDaily.value = res.daily
}

//生活指数列表项的单击事件
function selectItem(item) {
  // console.log(item.type)
  router.push(`/livingdetail/${item.type}`)
}
</script>

<template>
  <div class="indice">
    <h3>生活指数</h3>
    <ul>
      <li v-for="(item, i) in IndicesDaily" :key="i" @click="selectItem(item)">
        <div>
          <p>{{ item.name }}</p>
          <p>{{ item.category }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.indice {
  width: 100%;
  margin: 1rem 0rem;
  padding: 2rem;
  background: rgba(226, 226, 227, 0.756);
  border-radius: 1rem;
}
.indice > h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: rgb(81, 155, 241);
}
.indice > ul {
  display: grid;
  list-style: none;
  padding: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 每行4个元素 */
  grid-gap: 1rem;
}
.indice > ul > li {
  background: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}
.indice > ul > li > div > p:nth-of-type(1) {
  font-size: 1.1rem;
}
.indice > ul > li > div > p:nth-of-type(2) {
  font-size: 1rem;
  color: #00000088;
}
</style>
